<template>
  <div>

    <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showModelSel"
      :append-to-body="true"
      title="品牌机种机型选择"
      width="75%"
      @opened="searchHandle"
      @close="cancel"
    >
      <!-- 查询条件 -->
      <el-form ref="searchForm" :inline="true" :model="search" size="mini" >
        <el-form-item prop="brand" label="品牌">
          <r-select
            v-model="search.brand"
            :clearable="true"
            class="search-input"
            selectid="BRAND_ID"
            selectname="BRAND_NAME"
            url="/vehicleProduct/dealerBrandsQueryAll"
            model="DMSCLOUD_BASEDATA"
          />
        </el-form-item>
        <el-form-item prop="series" label="机种">
          <r-select
            v-model="search.series"
            :url="seriesurl"
            :clearable="true"
            :disabled="seriesdisabled"
            class="search-input"
            selectid="SERIES_ID"
            selectname="SERIES_NAME"
            model="DMSCLOUD_BASEDATA"
          />
        </el-form-item>
        <el-form-item prop="model" label="机型">
          <r-select
            v-model="search.model"
            :url="modelurl"
            :clearable="true"
            :disabled="modeldisabled"
            class="search-input"
            selectid="MODEL_ID"
            selectname="MODEL_NAME"
            model="DMSCLOUD_BASEDATA"
          />
        </el-form-item>
        <el-form-item prop="modelCode" label="机型代码">
          <el-input v-model="search.modelCode" placeholder="机型代码" class="search-input" clearable />
        </el-form-item>
        <br>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="tableHead">
        <div class="tabletitle">品牌机种机型信息</div>
      </div>
      <!-- 用户列表 -->
      <BaseTable ref="table" highlight-current-row @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @current-change="handleSelectionVehicleChange" >
        <el-table-column label="序号" type="index" />

        <el-table-column prop="BRAND_NAME" label="品牌" min-width="150"/>
        <el-table-column prop="SERIES_NAME" label="机种" min-width="150"/>
        <el-table-column prop="MODEL_NAME" label="机型" min-width="150" />
      </BaseTable>
      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirmHandle" >确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAllModels } from '@/api/basedata/model'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
export default {
  name: 'SelectSoNo',
  components: {
    BaseTable,
    rSelect,
    filtercode

  },
  mixins: [formMixins],
  props: {
    showModelSel: Boolean

  },
  data() {
    return {
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        brand: '',
        series: '',
        model: '',
        modelCode: ''
      },
      seriesdisabled: true,
      modeldisabled: true
    }
  },

  computed: {
    DMSCLOUD_SERVICE: function() {
      this.search.series = ''
      this.search.model = ''
      if (this.search.brand === '') {
        this.seriesdisabled = true
        this.modeldisabled = true
      } else {
        (
          this.seriesdisabled = false
        )
      }
      if (this.search.brand !== '') {
        return '/vehicleProduct/brandsdict/' + this.search.brand + '/seriessdict'
      } else {
        return ''
      }
    },
    seriesurl: function() {
      this.search.seriesId = ''
      this.search.modelId = ''
      this.search.packageId = ''
      if (this.search.brandId === '') {
        this.seriesdisabled = true
        this.modeldisabled = true
        this.packagedisabled = true
      } else {
        (
          this.seriesdisabled = false
        )
      }
      if (this.search.brand !== '') {
        return '/vehicleProduct/brandsdict/' + this.search.brand + '/seriessdict'
      } else {
        return ''
      }
    },
    modelurl: function() {
      this.search.model = ''
      if (this.search.series === '') {
        this.modeldisabled = true
      } else {
        (
          this.modeldisabled = false
        )
      }
      if (this.search.brand !== '' && this.search.series !== '') {
        return '/vehicleProduct/brandsdict/' + this.search.brand + '/seriessdict/' + this.search.series + '/modelsdict'
      } else {
        return ''
      }
    }
  },
  mounted() {
    // this.searchHandle();
  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      queryAllModels(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },

    cancel() {
      this.$emit('update:showModelSel', false)
    },
    // 选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    handleSelectionVehicleChange(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        debugger
        this.$emit('getModelSel', this.multipleSelection)
        this.$emit('update:showModelSel', false)
      }
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
